<div class="project-files-container">

  <div class="left">
    <nz-card [nzBordered]="false" nzTitle="工程列表">

      <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
        <nz-form-item>
          <nz-form-label>年份</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="year" nzAllowClear nzPlaceHolder="年份"
                       style="width: 170px;">
              <nz-option nzLabel="2020" [nzValue]="2020"></nz-option>
              <nz-option nzLabel="2019" [nzValue]="2019"></nz-option>
              <nz-option nzLabel="2018" [nzValue]="2018"></nz-option>
              <nz-option nzLabel="2017" [nzValue]="2017"></nz-option>
              <nz-option nzLabel="2016" [nzValue]="2016"></nz-option>
              <nz-option nzLabel="2015" [nzValue]="2015"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>灌区类型</nz-form-label>
          <nz-form-control>
            <nz-select [ngModel]="'1'" formControlName="type" nzAllowClear nzPlaceHolder="工程类型"
                       style="width: 170px;">
              <nz-option nzLabel="类型1" nzValue="1"></nz-option>
              <nz-option nzLabel="类型2" nzValue="2"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>关键词</nz-form-label>
          <nz-form-control>
            <input formControlName="name" nz-input placeholder="关键词"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control>
            <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
            <button nz-button (click)="onAdd()" style="margin-left: 10px">新增</button>
            <button
              nz-button
              nzType="default"
              [disabled]="delDisable"
              nz-popconfirm
              nzPopconfirmTitle="确认删除勾选吗？"
              (nzOnConfirm)="onDeleteAll()" style="margin-left: 10px">删除</button>
          </nz-form-control>
        </nz-form-item>
      </form>


      <div class="table-wrap">
        <nz-table
          #rowSelectionTable
          nzSize="middle"
          nzShowPagination
          nzShowSizeChanger
          [nzData]="listOfAllData"
          (nzCurrentPageDataChange)="currentPageDataChange($event)">
          <thead>
          <tr>
            <th
              nzWidth="62px"
              nzShowCheckbox
              [(nzChecked)]="allChecked"
              [nzIndeterminate]="indeterminate"
              (nzCheckedChange)="checkAll($event)"
            ></th>
            <th>工程名称</th>
            <th>年份</th>
            <th>负责人</th>
            <th>电话</th>
            <th>工程类型</th>
            <th>建设单位</th>
            <th>建设地点</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of rowSelectionTable.data">
            <td nzShowCheckbox
                [(nzChecked)]="mapOfCheckedId[data.id]"
                (nzCheckedChange)="refreshStatus()">
            </td>
            <td>{{ data.name }}</td>
            <td>{{ data.year }}</td>
            <td>{{ data.manager }}</td>
            <td>{{ data.telephone }}</td>
            <td>{{ data.type }}</td>
            <td>{{ data.districtId }}</td>
            <td>{{ data.address }}</td>
            <td>
              <a (click)="openEditModal(data)">修改</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a nz-popconfirm nzPopconfirmTitle="确认删除？" nzPopconfirmPlacement="left"
                 (nzOnConfirm)="onDelete(data.id)">
                删除
              </a>
            </td>
          </tr>
          </tbody>
        </nz-table>
      </div>
    </nz-card>



  </div>

  <div class="right">
    <nz-card [nzBordered]="false" class="card" nzTitle="工程年度分部" style="  margin-bottom: 20px;">
      <div echarts [options]="projectChartOption" [merge]="projectChartMergeOption" style="height: calc(50vh - 170px);"></div>
    </nz-card>

    <nz-card [nzBordered]="false" class="card" nzTitle="工程分类">
      <div echarts [options]="pieChartOption" [merge]="pieChartMergeOption" style="height: calc(50vh - 170px);"></div>
    </nz-card>
  </div>
</div>
